<template>
  <div class="register_container">
    <div class="register_top">
      <div class="logo">
        <img src="../assets/logo.png" alt="" />
        <img src="../assets/logo_text.png" class="logo_text" />
      </div>
      <div class="logo-title">欢迎注册</div>
      <!-- 注册按钮 -->
      <span class="login"
        >有账号？<router-link to="/login">去登录></router-link></span
      >
    </div>
    <div class="register_box">
      <!-- 标题区域 -->
      <div class="register_title">
        <img src="../assets/logo_text.png" />
      </div>
      <!-- 注册表单区域 -->
      <el-form
        :model="registerForm"
        :rules="registerFormRules"
        ref="registerFormRef"
        label-width="0"
        class="register_form"
      >
        <!-- 账号 -->
        <el-form-item prop="account">
          <el-input
            v-model="registerForm.account"
            prefix-icon="el-icon-user"
            placeholder="邮箱/手机"
          ></el-input>
        </el-form-item>
        <!-- 密码 -->
        <el-form-item prop="password">
          <el-input
            v-model="registerForm.password"
            prefix-icon="el-icon-lock"
            type="password"
            placeholder="设置密码"
          ></el-input>
        </el-form-item>
        <!-- 再次输入密码 -->
        <el-form-item prop="rePassword">
          <el-input
            v-model="registerForm.rePassword"
            prefix-icon="el-icon-lock"
            type="password"
            placeholder="确认密码"
          ></el-input>
        </el-form-item>
        <!-- 按钮区域 -->
        <el-form-item class="register_btn">
          <el-button type="primary" style="width: 340px" @click="register"
            >注册</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <el-footer>
      <div class="links">
        关于我们 | 联系我们 | 联系客服 | 商家入驻 | 营销中心 | 手机易毛 |
        友情链接 | 销售联盟 | 易毛社区 | 易毛公益 | English Site | Contact U
      </div>
      <div class="copyright">
        地址：江西省南昌市江西农业大学软件学院 邮编：xxxxxx 电话：xxx-xxx-xxxx
        传真：xxxxxxxxxxxx 邮箱: xxxxxxxxxx.cn,
        赣ICP备xxxxxxxx号赣公网安备xxxxxxxxxxx
      </div>
    </el-footer>
  </div>
</template>

<script>
export default {
  data() {
    // 验证邮箱/手机的规则
    var checkAccount = (rule, value, cb) => {
      const regAccount =
        /(^[\w.\-]+@(?:[a-z0-9]+(?:-[a-z0-9]+)*\.)+[a-z]{2,3}$)|(^1[3|4|5|8]\d{9}$)/

      if (regAccount.test(value)) {
        // 合法的邮箱或手机
        return cb()
      }

      cb(new Error('请输入合法的账号(邮箱/手机)'))
    }

    return {
      // 登录表单的数据绑定对象
      registerForm: {
        account: '',
        password: '',
        rePassword: '',
      },
      // 表单的验证规则对象
      registerFormRules: {
        // 验证账号是否合法
        account: [
          { required: true, message: '请输入账号', trigger: 'blur' },
          { validator: checkAccount, trigger: 'blur' },
        ],
        // 验证密码是否合法
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          {
            min: 6,
            max: 15,
            message: '长度在 6 到 15 个字符',
            trigger: 'blur',
          },
        ],
        rePassword: [
          { required: true, message: '请再次输入密码', trigger: 'blur' },
          {
            min: 6,
            max: 15,
            message: '长度在 6 到 15 个字符',
            trigger: 'blur',
          },
        ],
      },
    }
  },
  methods: {
    register() {
      // 发起请求前的表单预验证
      this.$refs.registerFormRef.validate(async valid => {
        if (!valid) return
        const { data: res } = await this.$http.post(
          'register',
          this.registerForm
        )
        if (res.meta.status !== 200) return this.$message.error('登录失败!')
        this.$message.success('登录成功!')
      })
    },
  },
}
</script>

<style lang="less" scoped>
.register_top {
  height: 110px;
  width: 100%;
  border-bottom: 1px solid #eee;
  background-color: #ffffff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 100px;
  padding-right: 100px;
  font-size: 14px;

  .logo {
    width: 70px;
    height: 70%;

    img {
      width: 100%;
      height: 100%;
    }

    .logo_text {
      margin-top: -50px;
    }
  }

  .logo-title {
    float: left;
    height: 34px;
    line-height: 34px;
    font-size: 24px;
    color: #333;
  }

  .login {
    float: left;
    height: 34px;
    line-height: 34px;
    font-size: 24px;
    color: #999;

    a {
      color: #e22;
      text-decoration: none;
    }
  }

  .register_top_left {
    display: flex;
    justify-content: space-around;
    vertical-align: bottom;
    cursor: pointer;

    .register_address {
      width: 40px;
    }

    .el-icon-location {
      color: #c00000;
      margin-top: 3px;
    }
  }

  .register_top_right {
    display: flex;
    justify-content: space-around;

    li {
      padding: 0 20px;
      cursor: pointer;

      &:hover {
        color: red;
      }
    }

    .el-icon-shopping-cart-2 {
      color: red;
      margin-top: 3px;
      margin-right: -10px;
    }
  }
}

.register_title {
  position: absolute;
  left: 50%;
  top: 0px;
  transform: translateX(-50%);
}

.register_container {
  // background: url('../assets/logo.png') no-repeat no-repeat center;
  background-size: cover;
  height: 100%;

  .register_box {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 500px;
    background-color: rgba(0, 0, 0, 0.3);
    height: 350px;
    border-radius: 5px;
  }

  .el-footer {
    height: 200px !important;
    background-color: #fff;
    text-align: center;
    padding-top: 740px;
    font-size: 15px;
    color: #747272;

    .links {
      cursor: pointer;
      border-top: 1px solid #9e9b9b;
      padding-top: 20px;
    }

    .copyright {
      margin-top: 25px;
    }
  }
}

.register_form {
  position: absolute;
  top: 90px;
  width: 100%;
  padding: 0 80px;
  box-sizing: border-box;
}

.register_btn {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}
</style>
